<template>
   <!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <router-link to="/TContractTrace">承运合同跟踪管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>承运合同列表</el-breadcrumb-item>
  </el-breadcrumb>
</div>
    <el-form :inline="true" :model="from" class="demo-form-inline">
    <el-form-item label="合同标题">
      <el-input v-model="from.contractTitle" placeholder="请输入合同标题" clearable />
    </el-form-item>
    <el-form-item label="外协单位">
      <el-input v-model="from.unit" placeholder="对方单位" clearable />
    </el-form-item>
    <el-form-item label="外协负责人">
      <el-input v-model="from.personCharge" placeholder="对方负责人" clearable />
    </el-form-item>
    <el-form-item label="经办人">
      <el-input v-model="from.attn" placeholder="经办人" clearable />
    </el-form-item>
    <el-form-item label="签订日期">
        <el-date-picker
        v-model="from.dateofSigning"
        
        type="date"
        placeholder="签订日期" value-format="YYYY-MM-DD"
        clearable
      />
    </el-form-item>
   
    <el-button size="small" type="primary" @click="show" >查询</el-button>

    <el-button size="small" type="primary" @click="chong()"  >重置</el-button>
        <el-button size="small" type="primary" @click="Dels()"  >批量删除</el-button>
    </el-form>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection"  width="55" />
    <el-table-column prop="contractNumber" label="合同编号" width="100" />
    <el-table-column prop="contractTitle" label="合同标题" width="100" />
    <el-table-column prop="unit" label="外协单位" width="100" />
    <el-table-column prop="personCharge" label="外协负责人" width="100" />
    <el-table-column prop="lineName" label="线路" width="100" />
    <el-table-column prop="tonPrice" label="吨运价" width="100" />
    <el-table-column prop="ton" label="包车条件吨位" width="100" />
    <el-table-column prop="charteredBusPrice" label="包车金额" width="100" />
 <el-table-column prop="dateofSigning" label="签订日期" width="100" >
  <template #default="scope">
            {{ scope.row.dateofSigning.substring(0, 10)}}
   </template>
 </el-table-column>
    <el-table-column prop="attn" label="经办人" width="100" />
    <el-table-column prop="createdDate" label="创建时间" width="100" >
      <template #default="scope">
        {{ scope.row.createdDate.substring(0, 10)}}
      </template>
    </el-table-column>
   <el-table-column prop="abnormalalarms" label="异常报警" width="100" />
       <el-table-column prop="shipmentstatus" label="货运状态" width="100" />
       <el-table-column  label="操作" width="800" >
        <template #default="scope">
          <el-button size="small" type="danger" :disabled="scope.row.shipmentstatus == '已完成' || scope.row.shipmentstatus == '运输中'"  @click="Del()" >删除</el-button>
          <el-button size="small" v-if="scope.row.shipmentstatus == '运输中'
          " @click="UpdateStatus(scope.row.contractId,'已完成')" type="primary" >签收</el-button>
          <el-button size="small" v-if="scope.row.shipmentstatus=='未起运'" @click="UpdateStatus(scope.row.contractId,'运输中')"  type="primary" >发货</el-button>
          <el-button size="small" type="primary"  @click="UpdateStatus(scope.row.contractId,'已回单')" v-if="scope.row.shipmentstatus=='已完成'" >回单</el-button>
          <el-button size="small" type="primary" v-if="scope.row.shipmentstatus == '运输中'" @click="ToOnlineTracking(scope.row.abnormalalarms,scope.row.lineName)">在线跟踪</el-button>

          <el-button size="small" type="primary"  v-if="scope.row.shipmentstatus=='未起运'"  @click="Editor(scope.row.lineName,scope.row.contractId)">定义线路</el-button>
          <el-button size="small" type="primary" @click="Trace(scope.row.lineName,scope.row.contractId) "  v-if="scope.row.shipmentstatus=='已回单'">跟踪记录</el-button>
       </template>
         </el-table-column>
    </el-table>
    <el-pagination
         v-model:current-page="page.Pageindex"
         v-model:page-size="page.Pagesize"
         :page-sizes="[3, 6, 9, 11]"
          layout="total, sizes, prev, pager, next, jumper"
         :total="page.totalCount"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
</template>
   <script setup lang='ts'>
    import axios  from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize } from 'element-plus'
    import { ref, reactive, onMounted,watch } from 'vue';
    import { useRouter } from 'vue-router';
const router=useRouter()
    const tableData = ref([]);  
    onMounted(() => {
       show()
    })
         //跳转定义线路
      const LineGet:any=ref([])
      const Editor = (linenames:any,id:any) => {
        axios.get("/bread/api/Lines/GetByLine", {
          params: {
        LineName: linenames
      }
    }).then((res) => {
      LineGet.value = res.data.data
     router.push({
        path: '/DefineLine',
        query: {
          startingCounty: LineGet.value[0].startingCounty,
          endCounty: LineGet.value[0].endCounty,
              id:id
        }
       })
     
    })
   }
     //查询条件
    const from=reactive({
            contractTitle:'',
            unit:'',
            personCharge:'',
            attn:'',
            dateofSigning:'',
            ccontractStatus:''
 })
const multipleSelection = ref([])
 //多选用于批删
 const handleSelectionChange = (val:any) => {
  multipleSelection.value=(val.map(o=>o.contractId))

}
const Trace=(linenames:any,id:any)=>{
      router.push({
        path: '/TrackRecord',
        query: {
          linenames: linenames,
          id:id
               }
       })
    }
//批量删除
const Del=()=>{
  console.log(multipleSelection.value[0])
  ElMessageBox.confirm(
    '您确定要删除吗？',
    'Warning',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post('/hwrite/api/Contract/DelContract',
        {
          ContractId:multipleSelection.value
        }
      )
.then(res=>{
   if(res.data.data==1){
      ElMessage.success('删除成功')
      show();
   
    }
})
    })
}
//单删除
const Dels=()=>{
  console.log(multipleSelection.value[0])
  ElMessageBox.confirm(
    '您确定要删除吗？',
    'Warning',
    {
      confirmButtonText: '是的',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post('/hwrite/api/Contract/DelContract',
        {
          ContractId:multipleSelection.value
        }
      )
.then(res=>{
   if(res.data.data==1){
      ElMessage.success('删除成功')
      show();
   
    }
})
    })
}
//查询变量
const chong=()=>{
  from.contractTitle='',
  from.personCharge='',
  from.attn='',
  from.unit='',
  from.dateofSigning='',
  from.ccontractStatus=''
 }
 const page=reactive({
    Pageindex:1,
    Pagesize:3,
    totalCount:0,
    PageCount:0

 })
   //显示承运合同列表
const show=()=>{
    axios.get('/hread/api/ContractRead/CShowContract',
            {
                params: {
                    Pageindex:page.Pageindex,
                    Pagesize:page.Pagesize,
                    ContractTitle:from.contractTitle,
                    Unit:from.unit,
                    PersonCharge:from.personCharge,
                    Attn:from.attn,
                    DateofSigning:from.dateofSigning,
                    CcontractStatus:from.ccontractStatus
   }
       }
        )
        .then(res => {
          console.log(res.data.data);
     tableData.value = res.data.data.list;
      page.totalCount=res.data.data.totalCount;
         page.PageCount=res.data.data.pageCount;
        
          
        })

}
//分页
const handleSizeChange = (val:any) => {
    page.Pagesize=val;
    show();
  }
  const handleCurrentChange = (val:any) => {
    page.Pageindex=val;
    show();
  } 

  //修改状态--运输中/已完成
  const UpdateStatus=(contractId:any,status:any)=>{
        axios.post('/hwrite/api/Tracking/AddContract',{
          contractId:contractId,
          shipmentstatus:status
        })
        .then(res=>{
          if(res.data.code>0){
            ElMessage.success('修改成功')
            show();
          } else {
            ElMessage.error("修改失败!");
            return 
          }
        })
      }

       //在线跟踪(正常)
       const ToOnlineTracking = (abnormalalarms:any,linenames: any) => {
        axios.get("/bread/api/Lines/GetByLine", {
          params: {
            LineName: linenames
          }
        }).then((res) => {
          LineGet.value = res.data.data
          console.log(LineGet.value);
          if(abnormalalarms=="正常"){
            router.push({
              path: '/OnlineTracking',
              query: {
                startingCounty: LineGet.value[0].startingCounty,
                endCounty: LineGet.value[0].endCounty,
                abnormalalarms:abnormalalarms
              }
            })
          }
          else{
            router.push({
              path: '/OnlineTrackAnomalies',
              query: {
                startingCounty: LineGet.value[0].startingCounty,
                endCounty: LineGet.value[0].endCounty,
                abnormalalarms:abnormalalarms
              }
            })
          }

        })
      } 

</script>
    
<style>
    
</style>